<template>
  <div class="tree-containner">
    <div class="tree">
      <el-tree
        show-checkbox
        :data="treeData"
        :props="defaultProps"
        ref="tree"
        @check-change="handleCheckChange">
      </el-tree>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name',
          isLeaf: 'leaf'
        },
        // 存储站点信息
        getTreeNodes: [],
        getResource: [],
        // 以下为接口
        submitdata: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'resource_getall',
          pid: this.$route.query.pid,
          ids: []
        }
      }
    },
    mounted() {
      this.queryData()
    },
    methods: {
      // 传输选择的节点
      handleCheckChange() {
        this.getTreeNodes = this.$refs.tree.getCheckedNodes()
        var tree = []
        for (let i = 0; i < this.getTreeNodes.length; i++) {
          tree.push(this.getTreeNodes[i].resource_id)
        }
        const getResource = tree
        this.$emit('treeResource', getResource)
        console.log(getResource)
      },
      // 以下都是接口获取的方法
      // 获取列表信息
      queryData() {
        /* 有登录后可调整为以下代码**/
        /*
        updateRecord(this.submitdata).then(res => {
          console.log(11111111111111)
          console.log(res)
          this.$router.push({
            // path: 'usermanage'
          })
        }).catch(() => {
          console.log('失败!')
          return
        })*/
        // 资源树总览
        axios.post('/project', this.submitdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.treeData.push(res.data.datas)
          console.log(this.treeData)
          console.log(res)
        })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .tree-containner{
    width: 100%;
    min-height: 40vw;
    background-color: #EAEDF1;
    .topButton{
      width: 100%;
      height: 50px;
    }
  }
  /deep/ .el-tree {
    position: relative;
    cursor: default;
    background: #EAEDF1;
    color: #606266;
  }
</style>
